
<template>
    <div id="app">
        <div id="main" style="width: 800px;height:370px;"></div>
    </div>
  </template>
   
  <script>
   
  export default {
    name: 'App',
    components: {},
    mounted() {
      this.onExample();
    },
    methods: {
      onExample() {
        let myChart  = this.$echarts.init(document.getElementById('main'));
        var option = {
            color:[
            '#2984F8',
        ],
        legend: {},
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10'],
            lineStyle: {
                color: '#F4F4F4',
            },
            
        },
        yAxis: {
            type: 'value',
            
        },
        series: [
            {
            data: [325, 250, 225, 130, 225, 30, 75],
            type: 'bar',
            barWidth: '15%',
            itemStyle:{
                barBorderRadius:[50, 50, 0, 0],
            }
            }
            
        ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
  </script>
<style scoped>
</style>